<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>一生平安-预产期计算</title>
<link rel="stylesheet" type="text/css" href="${ctx}/lib/mobile/jquery_mobile_1.0b1/jquery.mobile-1.0b1.min.css" />
	<link rel="stylesheet" type="text/css" href="${ctx}/lib/mobile/css/jszx-scroll.css" />
	<link rel="stylesheet" type="text/css" href="${ctx}/lib/mobile/css/jszx-bar.css" />
	<link rel="stylesheet" type="text/css" href="${ctx}/lib/mobile/css/dynamicPic.css" />
	<link rel="stylesheet" type="text/css" href="${ctx}/lib/mobile/css/mobile.css" />
	<link type="text/css" href="${ctx}/lib/mobile/jquery_mobile_1.0b1/jquery.mobile.datebox.min.css" rel="stylesheet" />
	<script type="text/javascript" src="${ctx}/lib/mobile/jquery_mobile_1.0b1/jquery-1.6.4.min.js"></script>
	<script>
	$(document).bind("mobileinit", function(){
		$.mobile.loadingMessage=false;
		$.mobile.selectmenu.prototype.options.nativeMenu = false;
		$.mobile.defaultPageTransition="none";
		$.mobile.listview.prototype.options.filterPlaceholder="";
	});
	</script>
	<script type="text/javascript" src="${ctx}/lib/mobile/jquery_mobile_1.0b1/jquery.mobile-1.0b1.min.js" charset="utf-8"></script>
	<script type="text/javascript" src="${ctx}/lib/mobile/js/mobile-common.js" charset="utf-8"></script>
	<script type="text/javascript" src="${ctx}/lib/mobile/js/dynamicPic.js" charset="utf-8"></script>
	<script type="text/javascript" src="${ctx}/lib/mobile/js/mobile.js" charset="utf-8"></script>
	<script type="text/javascript" src="${ctx}/lib/mobile/js/ycqjs.js" charset="utf-8"></script>
	<script type="text/javascript" src="${ctx}/lib/mobile/jquery_mobile_1.0b1/jquery.mobile.datebox.js"></script>
	<script type="text/javascript" src="${ctx}/lib/mobile/jquery_mobile_1.0b1/jquery.mobile.datebox.i8n.CHN-S.utf8.js"></script>
</head>
<body>
	<div data-role="page" id="mobile-indexYCQJS-page" class="page-div-style">
		<script>
		$('#mobile-indexYCQJS-page').live('pagebeforeshow',function(){
			//加载等待
			showLoadPage();
			
			//显示头部栏
	 		initHeader($("#mobileIndexYCQJSHeader"),"back");
	 		$("#mobileIndexYCQJSHeader").find("[name='mobileHeaderTitle']").text("预产期计算");
	 		
	 		//结束等待
			hideLoadPage();
	 		
			var nowDate = new Date();
			$("#ycqjs_year").val(nowDate.getFullYear());
			$("#ycqjs_month").val(nowDate.getMonth()+1);
			$("#ycqjs_day").val(nowDate.getDate());
			//$("#ycqjs_date").text("");
		});
		
		$("#mobile-indexYCQJS-page").live("pageshow",function(){
			$("#mobileIndexYCQJSScroller").css("height",window.innerHeight - $("#mobileIndexYCQJSHeader").height() 
					- $("#mobileIndexYCQJSPageFooter").height());
		});
		
		// 个人中心
		function userCenter(){
			window.location.href = "${ctx}/mobile/userCenter.html";
		}
		
		// 预产期计算
		function clickYCQJS(){
			var year = $.trim($("#ycqjs_year").val());
			var month = $.trim($("#ycqjs_month").val());
			var day = $.trim($("#ycqjs_day").val());
			var dateStr = calculationYCQ(year,month,day);
			$("#ycqjs_date").text(dateStr);
		}
		
		</script>
		<div style="position:absolute;width:100%;height:100%;top:0;display:none;z-index:100;" id="loginWait">
			<div style="position:absolute;height:100%;width:100%;top:0;">
				<div style="top:40%;height:90px;border-radius:8px;-webkit-box-shadow:1px 1px 1px #ccc;
					background:#ffffff;text-align:center;opacity:0.8;position: absolute;
					z-index: 100;left: 50%;width: 200px;margin-left: -130px;margin-top: -35px;padding: 10px 30px;">
					<img id="load_img" src="${ctx}/lib/mobile/image/load.gif" style="position:relative;">
					<p id="load_content" style="position:relative;">加载中...</p>
				</div>
			</div>
		</div>
		<div align="center" data-role="header" data-theme="b"  data-position="" id="mobileIndexYCQJSHeader">
		</div>
		<div data-role="content" id="mobileIndexYCQJSWrapper" style="padding:0;margin: 0px;" class="jszx-wrapper">
			<div id="mobileIndexYCQJSScroller" class="jszx-scroller" style="background: url(${ctx}/lib/mobile/image/yunfu-bg.jpg) no-repeat;
				background-size: cover;">
				<div style="background: url(/healthManage/lib/mobile/image/calendar.png) no-repeat;
    background-size: 40%;
    position: absolute;
    height: 60%;
    width: 100%;
    background-position: 15% 35%;"></div>
				<div style="height:60%;background: url(${ctx}/lib/mobile/image/yunfu.png) no-repeat;
				background-size: 50%;
    position: relative;
    background-position: 60%;">
				</div>
				<div style="position: absolute;
		    width: 100%;
		    top: 57%;" align="center">
					<div style="color: white;
					    background-color: #F09A9B;
					    height: 30px;
					    width: 55%;
					    border-radius: 5px;
					    font-family: 黑体;
					    text-shadow: 0 0px 0;
					    line-height: 30px;
					    font-size: 18px;">
						给你最科学的呵护
					</div>
				</div>
				<div style="top: 25px;position: relative;" align="center">
					<div class="ycqjs_div" style="">
						<table width="100%">
							<tr>
								<td rowspan="3" align="center">
									<div class="ycqjs_btn_div" align="center" onclick="clickYCQJS();">
										点我计算
									</div>
								</td>
								<td align="center" style="">
									<div class="div_input ui-body-d" style="">
										<input type="number" data-role="none" class="input_text" name="mobile" 
											id="ycqjs_year" placeholder="" maxLength="4" style="">
									</div>
								<td align="left">年</td>
							</tr>
							<tr>
								<td align="center">
									<div class="div_input ui-body-d" style="">
										<input type="number" data-role="none" class="input_text" name="mobile" 
											id="ycqjs_month" placeholder="" maxLength="2" style="">
									</div>
								</td>
								<td align="left">月</td>
							</tr>
							<tr>
								<td align="center">
									<div class="div_input ui-body-d" style="">
										<input type="number" data-role="none" class="input_text" name="mobile" 
											id="ycqjs_day" placeholder="" maxLength="2" style="">
									</div>
								</td>
								<td align="left">日</td>
							</tr>
							<tr>
								<td colspan="3" align="center">
									<div id="ycqjs_date" class="ui-body-d" style="border: 0;width: 80%;
									    height: 30px;border-radius: 8px;
									    line-height: 30px;color: #F5DEB4;color: black;font-size: 120%;">
										怀孕日期
									</div>
								</td>
							</tr>
						</table>
					</div>
				</div>
			</div>
		</div>
		<div data-role="footer" data-theme="b" data-position="" id="mobileIndexYCQJSPageFooter"
			align="center">
		</div>
	</div>
</body>
</html>